<template>
  <view :data-theme="globPrimary">
    <u-navbar :custom-back="onBack">
      <view class="order-navbar-title" :style="[navbarInnerStyle]" v-if="!loading">
        <u-icon
          name="checkmark-circle"
          color="#303133"
          size="44"
          top="2"
          v-if="orderInfo.status == 20 || orderInfo.status == 80"
        ></u-icon>
        <u-icon
          name="order_cancel_icon"
          custom-prefix="edu-icon"
          size="40"
          color="#303133"
          v-else
        ></u-icon>
        <view class="text u-line-1">{{ orderInfo.status_text }}</view>
      </view>
    </u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :down="{ use: false }"
      :height="mescrollHeight"
      @init="mescrollInit"
      @up="getdataInfo"
    >
      <block v-if="!loading">
        <view class="order-product">
          <div
            class="order-product__item"
            v-for="(item, index) in orderInfo.products"
            :key="index"
            @click="handlePath(item)"
          >
            <!-- 1：点播；2：直播；3：面授；4：班级； -->
            <block v-if="$edu.test.inArray(item.type_id, [1, 2, 3, 4])">
              <courseImage
                width="238"
                height="132"
                :image="item.cover_url"
                :courseType="item.course_type"
                :courseTypeText="item.type_text"
              ></courseImage>
              <view class="content">
                <view class="title u-line-1">{{ item.title }}</view>
                <block v-if="orderInfo.status == 20">
                  <view class="num" v-if="item.expire_rest == -1">永久有效</view>
                  <view class="num" v-else-if="item.expire_rest === 0"> 课程已过期 </view>
                  <view class="num" v-else
                    >距离课程到期还有<text class="red">{{ item.expire_rest }}</text
                    >天</view
                  >
                </block>
              </view>
              <view class="right">
                <view class="price">{{ item.price | formatCurrency }}</view>
              </view>
            </block>
            <!-- 8：公开考试；9：专项练习；10：套卷； -->
            <!-- 101：点播课时视频；102：点播课时音频；103：点播课时图文；104：点播课时电子书； -->
            <block v-else-if="$edu.test.inArray(item.type_id, [8, 9, 10, 101, 102, 103, 104])">
              <u-tag
                :text="$edu.test.inArray(item.type_id, [8, 9, 10]) ? '考试' : item.type_text"
                mode="plain"
                size="mini"
                class="type"
                :color="setTagTypeClass(item.type_id)"
                :border-color="setTagTypeClass(item.type_id)"
              />
              <view class="content">
                <view class="title u-line-2">{{ item.title }}</view>
                <block v-if="orderInfo.status == 20">
                  <view class="num" v-if="item.expire_rest == -1">永久有效</view>
                  <view class="num" v-else-if="item.expire_rest === 0"> 课程已过期 </view>
                  <view class="num" v-else
                    >距离课程到期还有<text class="red">{{ item.expire_rest }}</text
                    >天</view
                  >
                </block>
              </view>
              <view class="right">
                <view class="price">{{ item.price | formatCurrency }}</view>
              </view>
            </block>
            <!-- 11：商品 -->
            <block v-else-if="item.type_id == 11">
              <edu-image
                :width="132"
                :height="132"
                :src="item.cover_url"
                :border-radius="6"
              ></edu-image>
              <view class="content">
                <view class="title u-line-2">{{ item.title }}</view>
                <view class="num">x{{ orderInfo.ext_data.num }}</view>
              </view>
              <view class="right">
                <block
                  v-if="orderInfo.ext_data.credit_price > 0 && orderInfo.ext_data.cash_price > 0"
                >
                  <view class="price">{{ orderInfo.ext_data.credit_price }}积分</view>
                  <view class="price">+{{ orderInfo.ext_data.cash_price | formatCurrency }}</view>
                </block>
                <view class="price" v-else-if="orderInfo.ext_data.credit_price > 0"
                  >{{ orderInfo.ext_data.credit_price }}积分</view
                >
                <view class="price" v-else-if="orderInfo.ext_data.cash_price > 0">{{
                  orderInfo.ext_data.cash_price | formatCurrency
                }}</view>
                <view class="free" v-else>免费</view>
              </view>
            </block>
          </div>
        </view>

        <view class="order-info">
          <view class="item u-flex">
            <view class="label">订单编号：</view>
            <view class="text" @click="handleCopy(orderInfo.order_no)">{{
              orderInfo.order_no
            }}</view>
            <u-icon
              name="order_copy_icon"
              custom-prefix="edu-icon"
              size="26"
              color="#303133"
              @click="handleCopy(orderInfo.order_no)"
            ></u-icon>
          </view>
          <view class="item u-flex">
            <view class="label">购买者手机号：</view>
            <view class="text">{{ userInfo.phone }}</view>
          </view>
          <view class="item u-flex">
            <view class="label">支付方式：</view>
            <view class="text">{{ orderInfo.payway ? payway[orderInfo.payway] : '' }}</view>
          </view>
          <view class="item u-flex">
            <view class="label">下单时间：</view>
            <view class="text">{{ orderInfo.create_time | timeFormat('yyyy-mm-dd hh:MM') }}</view>
          </view>
          <view class="item u-flex">
            <view class="label">支付时间：</view>
            <view class="text" v-if="orderInfo.payment_time">{{
              orderInfo.payment_time | timeFormat('yyyy-mm-dd hh:MM')
            }}</view>
          </view>
          <view class="item u-flex">
            <view class="label">机构：</view>
            <view class="text">{{ orderInfo.mhm }}</view>
          </view>
        </view>

        <view class="order-info" v-if="orderInfo.order_type == 11 && orderInfo.fictitious == 0">
          <view class="item">
            <view class="text">配送信息</view>
          </view>
          <view class="item u-flex">
            <view class="label">配送快递：</view>
            <view
              class="grey"
              v-if="$edu.test.inArray(orderInfo.status, [0, 10]) || !orderInfo.ext_data.title"
              >未发货</view
            >
            <view class="text" v-else>{{ orderInfo.ext_data.title }}</view>
          </view>
          <view class="item u-flex">
            <view class="label">快递单号：</view>
            <view
              class="grey"
              v-if="$edu.test.inArray(orderInfo.status, [0, 10]) || !orderInfo.ext_data.order"
              >未发货</view
            >
            <block v-else>
              <view class="text" @click="handleCopy(orderInfo.ext_data.order)">{{
                orderInfo.ext_data.order
              }}</view>
              <u-icon
                name="order_copy_icon"
                custom-prefix="edu-icon"
                size="26"
                color="#303133"
                @click="handleCopy(orderInfo.ext_data.order)"
              ></u-icon>
            </block>
          </view>
          <view class="item u-flex u-col-top">
            <view class="label">收货地址：</view>
            <view v-if="!$u.test.empty(orderInfo.addrinfo)">
              <view class="text"
                >{{ orderInfo.addrinfo.consignee }} {{ orderInfo.addrinfo.phone }}</view
              >
              <view class="text"
                >{{ orderInfo.addrinfo.areatext }} {{ orderInfo.addrinfo.address }}</view
              >
            </view>
          </view>
        </view>

        <view class="order-info">
          <view class="item u-flex u-row-between">
            <view class="label"
              >{{
                $edu.test.inArray(orderInfo.order_type, [0, 1, 2, 3, 4])
                  ? '课程'
                  : $edu.test.inArray(orderInfo.order_type, [8, 9, 10])
                  ? '试卷'
                  : orderInfo.order_type == 11
                  ? '商品'
                  : ''
              }}总价</view
            >
            <div v-if="orderInfo.order_type == 11">
              <view class="free" v-if="productTotalPrice == 0">免费</view>
              <view class="text" v-else>{{ productTotalPrice }}</view>
            </div>
            <view class="text" v-else>{{ orderInfo.total_price | formatCurrency }}</view>
          </view>
          <!-- 课程优惠价 -->
          <view
            class="item u-flex u-row-between"
            v-if="!$edu.test.inArray(orderInfo.order_type, [11]) && orderInfo.fee_price"
          >
            <view class="label">优惠价格</view>
            <view class="text">{{ orderInfo.fee_price | formatCurrency }}</view>
          </view>
          <!-- 实体商品运费 -->
          <view
            class="item u-flex u-row-between"
            v-if="orderInfo.order_type == 11 && orderInfo.fictitious == 0"
          >
            <view class="label">运费</view>
            <view class="text">{{ orderInfo.products[0].carriage | formatCurrency }}</view>
          </view>
          <view class="item u-flex u-row-right">
            <view class="text"
              >{{
                $edu.test.inArray(orderInfo.status, [0, 60])
                  ? '应'
                  : $edu.test.inArray(orderInfo.status, [10])
                  ? '需'
                  : '实'
              }}付款：</view
            >
            <block v-if="orderInfo.order_type == 11">
              <view class="price" v-if="orderInfo.payment > 0 && orderInfo.credit.credit > 0">
                {{ orderInfo.credit.credit }}积分+
                {{ orderInfo.payment | formatCurrency }}
              </view>
              <view class="price" v-else-if="orderInfo.credit.credit > 0">
                {{ orderInfo.credit.credit }}积分
              </view>
              <view class="price" v-else-if="orderInfo.payment > 0">
                {{ orderInfo.payment | formatCurrency }}
              </view>
              <view class="free" v-else>免费</view>
            </block>
            <view class="price" v-else>{{ orderInfo.payment | formatCurrency }}</view>
          </view>
        </view>

        <view
          class="order-bottom-placeholder safe-area-inset-bottom"
          v-if="$edu.test.inArray(orderInfo.status, [0, 10])"
        ></view>
        <view
          class="order-bottom u-flex u-row-right safe-area-inset-bottom"
          v-if="$edu.test.inArray(orderInfo.status, [0, 10])"
        >
          <edu-button
            type="primary"
            shape="circle"
            plain
            @click="handleDelete"
            v-if="orderInfo.status == 0"
            >删除订单</edu-button
          >
          <edu-button
            type="primary"
            shape="circle"
            plain
            @click="handleCancel"
            v-if="orderInfo.status == 10"
            >取消订单</edu-button
          >
          <edu-button type="primary" shape="circle" @click="handlePay" v-if="orderInfo.status == 10"
            >去支付</edu-button
          >
        </view>
      </block>
    </mescroll-body>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import uniCopy from '@/utils/xb-copy/uni-copy.js'
import projectSetting from '@/settings/projectSetting.js'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import courseImage from '@/components/common/courseImage.vue'
export default {
  mixins: [MescrollMixin],
  components: {
    courseImage,
  },
  data() {
    return {
      projectSetting,
      orderInfo: {},
      loading: true,
      order_no: '',
      payway: { wxpay: '微信', alipay: '支付宝', lcnpay: '余额' },
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/getUserInfo',
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
      globNavbarRightButtonWidth: 'projectSetting/globNavbarRightButtonWidth',
    }),
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight - 50
      return `${height}px`
    },
    // 导航栏内部盒子的样式
    navbarInnerStyle() {
      let style = {}
      // #ifndef MP
      style.right = '130px'
      // #endif
      // #ifdef MP
      style.right = 130 + this.globNavbarRightButtonWidth + 'px'
      // #endif
      style.left = '130px'
      return style
    },
    // 商品总价
    productTotalPrice() {
      if (!this.loading && this.orderInfo.order_type == 11) {
        let credit = this.orderInfo.ext_data.credit_price
        let cash = Number(this.orderInfo.ext_data.cash_price)
        let num = this.orderInfo.ext_data.num
        if (credit * num > 0 && cash * num > 0) {
          return `${credit * num}积分+${this.projectSetting.appMoneySymbol}${cash * num}`
        } else if (credit * num > 0) {
          return `${credit * num}积分`
        } else if (cash * num > 0) {
          return `${this.projectSetting.appMoneySymbol}${cash * num}`
        } else {
          return 0
        }
      } else {
        return ''
      }
    },
  },
  options: { styleIsolation: 'shared' },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  onLoad(options) {
    this.order_no = options.id
  },
  onShow() {
    this.handleUpdate()
  },
  methods: {
    getdataInfo() {
      this.loading = true
      this.$edu.api.getOrderInfo(this.order_no).then((res) => {
        const { data } = res
        this.orderInfo = data
        setTimeout(() => {
          this.mescroll.endSuccess(1)
          this.loading = false
        }, 50)
      })
    },
    // 去支付
    handlePay() {
      this.$u.route('pages/pay', {
        no: this.order_no,
        payment: this.orderInfo.payment,
        redirect_type: 'order',
      })
    },
    // 删除
    handleDelete() {
      let _this = this
      uni.showModal({
        content: '确认删除吗?',
        success: (res) => {
          if (res.confirm) {
            _this.$edu.api
              .deleteUserOrder({
                order_no: _this.order_no,
              })
              .then((res) => {
                this.$u.toast(res.msg)
                this.onBack()
              })
              .catch((res) => {
                this.$u.toast(res.msg)
              })
          }
        },
      })
    },
    // 取消
    handleCancel() {
      let _this = this
      uni.showModal({
        content: '是否取消该订单?',
        success: (res) => {
          if (res.confirm) {
            _this.$edu.api
              .putUserOrderCancel({
                order_no: _this.order_no,
              })
              .then((res) => {
                this.$u.toast(res.msg)
                this.onBack()
              })
              .catch((res) => {
                this.$u.toast(res.msg)
              })
          }
        },
      })
    },
    // 更新
    handleUpdate() {
      this.mescroll && this.mescroll.resetUpScroll()
    },
    // 跳转
    handlePath(item) {
      /**
       * type_id 订类型
       * 1：点播；2：直播；3：面授；4：班级；
       * 101：点播课时视频；102：点播课时音频；103：点播课时图文；104：点播课时电子书；
       * 11：商品
       * */
      if (this.$edu.test.inArray(item.type_id, [1, 2, 3, 4])) {
        this.$u.route('pageCourse/course/details', {
          id: item.id,
        })
      } else if (this.$edu.test.inArray(item.type_id, [101, 102, 103, 104])) {
        this.$u.route('pageCourse/course/details', {
          id: item.course_id,
        })
      } else if (this.$edu.test.inArray(item.type_id, [11])) {
        this.$u.route('pageFound/mall/details', {
          id: item.id,
        })
      }
    },
    //复制
    handleCopy(val) {
      uniCopy({
        content: val,
        success: (res) => {
          this.$u.toast(res)
        },
        error: (err) => {
          this.$u.toast(err)
        },
      })
    },
    // class
    setTagTypeClass(id) {
      let cls = {
        101: this.globPrimaryColor,
        102: '#67c23a',
        103: '#783ce6',
        104: '#e6a23c',
      }
      if (this.$edu.test.inArray(id, [8, 9, 10])) {
        return '#1644ff'
      } else {
        return cls[id] || ''
      }
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/user/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.order-navbar-title {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  line-height: 1;
  width: 130px;
  .text {
    width: 100px;
    margin-left: 15rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: $edu-main-color;
  }
}
::v-deep .order-product {
  margin: 15rpx 30rpx 0;
  padding: 16rpx 24rpx;
  background-color: #fff;
  box-shadow: 0px 2rpx 24rpx 0px rgba(0, 0, 0, 0.08);
  border-radius: 20rpx;
  .order-product__item {
    padding: 16rpx 0;
    display: flex;
    align-items: flex-start;
    .content {
      flex: 1;
      min-width: 260rpx;
      margin-left: 24rpx;
      .title {
        max-width: 300rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: $edu-main-color;
      }
      .num {
        font-size: 22rpx;
        color: #909399;
        margin-top: 14rpx;
      }
      .red {
        color: $edu-price-color;
      }
    }
    .right {
      margin-left: auto;
      .price {
        font-size: 28rpx;
        font-weight: 400;
        color: $edu-main-color;
        text-align: right;
      }
      .free {
        font-size: 28rpx;
        font-weight: 400;
        color: $edu-free-color;
        text-align: right;
      }
    }
    .type,
    .type .u-tag {
      margin-top: 4rpx;
      border-radius: 0;
      border-top-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
}
::v-deep .order-info {
  margin: 15rpx 30rpx 0;
  padding: 32rpx 24rpx;
  background-color: #fff;
  box-shadow: 0px 2rpx 24rpx 0px rgba(0, 0, 0, 0.08);
  border-radius: 20rpx;
  .item + .item {
    margin-top: 16rpx;
  }
  .item {
    font-size: 26rpx;
    font-weight: 400;
  }
  .label {
    color: $edu-tips-color;
    white-space: nowrap;
  }
  .text {
    color: $edu-main-color;
  }
  .grey {
    color: $edu-tips-color;
  }
  .price {
    color: $edu-price-color;
  }
  .free {
    color: $edu-free-color;
  }
  .edu-icon {
    margin-left: 10rpx;
  }
  /* #ifndef H5 */
  .text,
  .price {
    font-weight: 500;
  }
  /* #endif */
}

.order-bottom-placeholder {
  width: 100%;
  height: 50px;
  box-sizing: content-box;
}
.order-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  height: 50px;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);
  box-sizing: content-box;
  ::v-deep.edu-btn {
    width: 85px;
    height: 32px !important;
    line-height: 32px !important;
    margin-left: 32rpx;
    margin-right: 0;
  }
}
</style>
